//采用中介者模式 ,Game对象统领其他所有对象演员：Langd,background,Pipe,bird,

//获取canvas元素
var myCanvas = document.getElementById("canvas1");
//IE低版本的兼容不至于BOOM！
if (myCanvas.getContext) {
  var ctx = myCanvas.getContext("2d");
}

////不怂 ！上来直接就是一个IIFE，直接就是干，将Game类暴露到全局
(function() {
  //定义Game类构造函数
  var Game = (window.Game = function(CanvasElement, ctx) {
    this.myCanvas = CanvasElement;
    this.ctx = ctx;
    //保存this指向
    var that = this;
    this.txtArr = [
      "弹幕发射!biubiu 颤抖吧！小鸟",
      "6666 感觉很好玩的样子 _(:_」∠)_ ",
      "起身~~~~~~~卢本伟牛逼",
      "这里是卢本伟的直播间吗？！！！！！！"
    ];
    this.speed = 0;
    //game对象的分数定义
    this.score = 0;
    //得到图片资源的类数组 保存了图片img对象
    this.imgS = {};
    this.fno = 0; //设置帧编号
    this.pipeArr = []; //管子数组        this.speed = this.Land.speed;
    //上来实例化对象直接初始化canvas 游戏
    this.init();
    //游戏的启动都要等imgsLoad执行结束，图片资源加载完毕，才会执行实参中回调函数(让图片资源加载完毕事件来驱动)：也就是启动游戏和绑定点击事件
    this.imgsLoad(function() {
      that.start();
      //游戏图片资源加载完之后才绑定game对象的鼠标监听事件
      // that.bindEvent();
    });
  });
  //Game原型初始化init方法
  Game.prototype.init = function() {
    //canvas响应式布局适配所有屏幕
    //init初始化方法在实例化的时候只执行一次，用来定义canvas画布的样式大小响应式适配屏幕
    // console.log(this.imgS);
    console.log("游戏初始化");
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    if (windowWidth > 414) {
      windowWidth = 414;
    } else if (windowWidth < 320) {
      windowWidth = 320;
    }
    if (windowHeight >= 736) {
      //如果屏幕的高度大于736那就固定到736
      windowHeight = 736;
    } else if (windowHeight < 500) {
      //如果屏幕的宽度小于500，那就固定到500
      windowHeight = 500;
    }
    myCanvas.width = windowWidth;
    myCanvas.height = windowHeight;
    this.txtfno = myCanvas.width;
  };
  //图片加载事件：全部加载完成再执行游戏初始化game.init（）,因为图片的载入是异步意见，所以要添加载入完成事件
  Game.prototype.imgsLoad = function(callback) {
    var that = this;
    //这里是图片的资源，需要改的话改name 和 src，新增直接写在数组
    this.imgArr = [
      { name: "bg_day", src: "images/res/bg_day.png" },
      { name: "bg_night", src: "images/res/bg_night.png" },
      { name: "bird0_0", src: "images/res/bird0_0.png" },
      { name: "bird0_1", src: "images/res/bird0_1.png" },
      { name: "bird0_2", src: "images/res/bird0_2.png" },
      { name: "bird1_0", src: "images/res/bird1_0.png" },
      { name: "bird1_1", src: "images/res/bird1_1.png" },
      { name: "bird1_2", src: "images/res/bird1_2.png" },
      { name: "bird2_0", src: "images/res/bird2_0.png" },
      { name: "bird2_1", src: "images/res/bird2_1.png" },
      { name: "bird2_2", src: "images/res/bird2_2.png" },
      { name: "pipe_down", src: "images/res/pipe_down.png" },
      { name: "pipe_up", src: "images/res/pipe_up.png" },
      { name: "land", src: "images/res/land.png" },
      { name: "score0", src: "images/res/font_048.png" },
      { name: "score1", src: "images/res/font_049.png" },
      { name: "score2", src: "images/res/font_050.png" },
      { name: "score3", src: "images/res/font_051.png" },
      { name: "score4", src: "images/res/font_052.png" },
      { name: "score5", src: "images/res/font_053.png" },
      { name: "score6", src: "images/res/font_054.png" },
      { name: "score7", src: "images/res/font_055.png" },
      { name: "score8", src: "images/res/font_056.png" },
      { name: "score9", src: "images/res/font_057.png" },
      { name: "logo", src: "images/res/title.png" },
      { name: "button_play", src: "images/res/button_play.png" },
      { name: "tutorial", src: "images/res/tutorial.png" },
      { name: "game_over", src: "images/res/text_game_over.png" }
    ];
    var imglodCount = 0; //每一张图片载入完成就++，信号量的判断
    //入口函数判断图片是否 全部加载完成
    for (var i = 0; i < this.imgArr.length; i++) {
      var imgname = this.imgArr[i].name;
      //给Game构造函数的imgS属性里面添加遍历到的图片img对象
      this.imgS[imgname] = new Image();
      this.imgS[imgname].src = this.imgArr[i].src;
      //绑定图片载入完成事件
      this.imgS[imgname].onload = function() {
        imglodCount++;
        // console.log(imglodCount);
        that.ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
        var txt = "资源载入中" + imglodCount + "/" + that.imgArr.length;
        that.ctx.font = "oblique small-caps bold 30px Arial";
        that.ctx.fillText(txt, 100, 250);
        // console.log(imglodCount);
        if (imglodCount == that.imgArr.length) {
          console.log("图片加载完毕");

          callback(); //图片加载完毕执行回调函数：游戏开始start方法
        }
      };
    }
  };
  //game类的启动游戏方法
  Game.prototype.start = function() {
    console.log("游戏开始");
    console.log(this.imgS);
    var that = this; //保存this指向
    //实例化SceneManager场景管理器对象!!!!!!!!!!
    this.SM = new SceneManager();

    //定时器开启，开始不断更新渲染游戏场景
    this.timer = setInterval(function() {
      //帧时间++  ,帧编号决定了管子多久刷一个，还有小鸟的落地加速度
      that.fno++;
      //定时器每次清除画布canvas
      that.ctx.clearRect(0, 0, 1000, 1000);
      //game对象只负责场景管理器的更新然后渲染
      that.SM.update();
      that.SM.render();

      //渲染帧时间FON信息还有另外一些信息
      // that.speed = that.land.speed;
      that.ctx.font = "16px consolas";
      that.ctx.fillStyle = "black";
      // that.ctx.fillText("当前速度" + that.speed, 325, 18);
      that.ctx.fillText("当前速度" + that.land.speed, 300, 18);
      that.ctx.beginPath();
      that.ctx.fillText("帧信息FNO:" + that.fno, 0, 18);
    }, 20);
  };

  //定义一个得分计算的渲染的方法
  Game.prototype.scoreGet = function() {
    //打印得分
    //将分数数字转成字符串,这样就能取得分数字符串的长度，比如1234，长度是4，咱for循环这个长度,把每一位数字进行打印
    var score = game.score.toString();
    //for循环 进行图片的打印,有一根基准中心对准线，myCanvas.width / 2 - score.length / 2 * 间隔
    for (let i = 0; i < score.length; i++) {
      game.ctx.save();
      //打印哪个数字？charAt() 方法可返回指定位置的字符。,搜索出来的i位置的数字进行字符串拼接得到imgs数组中的数字图片就能for循环打印分数了
      //数字打印的起点是中轴线，canvas中轴线就是 myCanvas.width /2,中轴线需要根据数字的长度来进行计算，得分长度 /2 就能得到偶数或者奇数，再乘以34也就是间隔，就能得到第一张图片要位移的距离，第二张图片的移动距离要 加上 for循环的i变量*34
      var inx = score.charAt(i); //charset搜索字符串中数字
      game.ctx.drawImage(
        game.imgS["score" + inx],
        myCanvas.width / 2 - (score.length / 2) * 34 + 34 * i + 5,
        30,
        24,
        44
      );
      game.ctx.restore();
    }
  };

  //IIFE结束口括号处，语句请写在口号里面
})();
////////////////
//整个游戏的总开关：实例化游戏对象game
if (myCanvas.getContext) {//IE低版本的兼容不至于BOOM！
  var game = new Game(
    document.getElementById("canvas1"),
    this.myCanvas.getContext("2d")
  );
}
